<template>
  <div id="main" />
</template>
<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/bar')
require('echarts/lib/component/markLine')
require('echarts/lib/component/markPoint')

export default {
  mounted() {
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      title: {
        text: '价格数量分布',
        subtext: 'Fake Data'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['公寓', '别墅', '酒店']
      },

      calculable: true,
      xAxis: [
        {
          type: 'category',
          // prettier-ignore
          data: ['1000￥', '1500￥', '2000￥', '2500￥']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '公寓',
          type: 'bar',
          data: [22, 14, 5, 10],
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        },
        {
          name: '别墅',
          type: 'bar',
          data: [10, 24, 11, 16],
          markPoint: {
            data: [
              { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
              { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        },
        {
          name: '酒店',
          type: 'bar',
          data: [13, 2, 4, 16],
          markPoint: {
            data: [
              { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
              { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        }
      ]
    }

    option && myChart.setOption(option)
  }
}

</script>
<style scoped>
#main{
    height: 500px;
    width: 100%;
}
</style>
